<template>
    <!-- 修改资料 -->
  
    <div>
      <ts-card header="套餐信息">
        <el-form
          label-width="100px"
          :model="form"
          label-position="right"
          ref="formRef"
          :rules="formRules"
        >
          <el-row>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="产品编号" required>
                <sc-table-select
                  v-model="form"
                  fileName="ProductReport"
                  :props="productProps"
                  :inputWidth="500"
                  :mapping="productMapping"
                  @change="productChange"
                ></sc-table-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="名称">
                <el-input v-model="form.name" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="单位">
                <el-input v-model="form.unitName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="规格">
                <el-input v-model="form.spec" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="主图">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="form.imgSrc"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="srcList"
                  fit="cover"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="生效日期">
                <el-date-picker
                  v-model="form.effectDate"
                  value-format="YYYY-MM-DD"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="失效日期">
                <el-date-picker
                  v-model="form.invalidDate"
                  value-format="YYYY-MM-DD"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="顺序">
                <el-input-number v-model="form.itemIndex"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="会员级别">
                <el-select
                  v-model="form.memberLevelIdsArray"
                  multiple
                  clearable
                  placeholder="请选择："
                >
                  <el-option
                    v-for="item in configData.memberLevelList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="金额" required>
                <el-input v-model="form.pckPrice" type="number" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="状态" prop="status">
                <el-switch
                  v-model="form.status"
                  size="large"
                  inline-prompt
                  active-value="normal"
                  inactive-value="disable"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </ts-card>
      <ts-card heder="套餐产品">
        <sc-form-table
          v-model="dataList"
          dragSort
          :addTemplate="addTemplate"
          @delete="rowDelete"
          placeholder="暂无数据"
        >
          <el-table-column label="产品编号" width="300">
            <template #default="scope">
              <ts-select
                multipe
                v-model="scope.row.mtlNo"
                fileName="ProductReport"
                :template="productProps2"
                @updateRow="mtlChange(scope, $event)"
                @selectRows="selectAllRow"
                :mapping="mapping"
                :label="scope.row.name"
              ></ts-select>
            </template>
          </el-table-column>
          <el-table-column label="产品名称" prop="name"></el-table-column>
          <el-table-column label="产品单位" prop="unitName"></el-table-column>
          <el-table-column label="产品单价" >
              <template #default="scope">
                  <el-input-number v-model="scope.row.price"></el-input-number>
              </template>
          </el-table-column>
          <el-table-column label="产品数量" >
              <template #default="scope">
                  <el-input-number v-model="scope.row.qty"></el-input-number>
              </template>
          </el-table-column>
        </sc-form-table>
      </ts-card>
      <div class="button-position">
        <el-button @click="updateVisible">取 消</el-button>
        <el-button type="primary" @click="updatePCT(formRef)">确 定</el-button>
      </div>
    </div>
  </template>
  
  
  <script setup>
  import { reactive, ref, onMounted } from "vue";
  import { ElNotification } from "element-plus";
  import Api from "@/api/model/pm";
  import tsEditor from "@/components/scEditor/index.vue";
  import tsSelect from "@/components/scSelect/index.vue";
  import { deepClone } from "@/utils/arr";
  import template from "@/utils/template";
  const emit = defineEmits(["updatetable"]);
  const props = defineProps({
    paramsData: {
      type: Object,
      defalut: {},
    },
  });
  
  // 添加用户数据的对象
  const form = ref({});
  const product = ref({})
  const dataList = ref([])
  const deleteList = ref([])
  const addTemplate = ref({});
  const srcList = ref([]);
  const configData = ref({});
  const formRef = ref();
  const formRules = reactive({});
  const productProps = {
    value: "mtlNumber",
    label: "name",
  };
  const productProps2 = {
    value: "number",
    label: "name",
  };
  const productMapping = [
    { value: "id", label: "mtlId" },
    { value: "number", label: "mtlNumber" },
    { value: "name", label: "name" },
    { value: "unitId", label: "unitName" },
    { value: "spec", label: "spec" },
    { value: "price", label: "pckPrice" },
    { value: "imgSrc", label: "imgSrc" },
  ];
  const mapping = [
    { value: "name", label: "name" },
    { value: "unitId", label: "unitName" },
    { value: "price", label: "price" },
    { value: "number", label: "number" },
  ];
  onMounted(() => {
    getInit();
  });
  
  const updateVisible = () => {
    emit("updatetable");
  };
  
  const getInit = async () => {
    let res = await Api.package.detail.post(props.paramsData);
    console.log(res)
    if (res.code == "200") {
      configData.value = res.configData;
      form.value = deepClone(res.data);
      product.value = deepClone(res.data)
      addTemplate.value = res.dtl
      dataList.value = res.dataList
      srcList.value.splice(0, 1, res.data.imgSrc);
      dataList.value.push(deepClone(addTemplate.value))
    }
  };
  
  const productChange = (val) => {
    srcList.value.splice(0, 1, val.imgSrc);
    
    form.value = Object.assign(deepClone(product.value), form.value);
  };
  const mtlChange = (scope,val)=>{
      console.log(scope.row,val)
      Object.assign(scope.row,val)
      dataList.value.push(addTemplate.value)
  }
  const selectAllRow = (val)=>{
      
      val.forEach(ele => {
         ele = Object.assign(deepClone(addTemplate.value),ele)
          dataList.value.unshift(ele)
      });
  }
  const rowDelete = (val) => {
  deleteList.value.push(val);
};
  // 上传
  const updatePCT = async (formRef) => {
    await formRef.validate((valid, fields) => {
      if (valid) {
        updatePCTData();
      }
    });
  };
  
  const updatePCTData = async () => {
    // console.log(form.name);
    var params = {
      bean: form.value,
      dataList:dataList.value.concat(deleteList.value).filter(ele=>ele.number)
    };
    var res = await Api.package.update.post(params);
    if (res.code == 200) {
      ElNotification.success({
        title: "",
        message: "修改成功！",
        duration: 2000,
      });
      emit("updatetable", true);
    }
  };
  </script>
  
  <style scoped></style>
  
  